<template>
  <el-dialog :visible.sync="addEditDialog" :before-close="check" title="新增优惠策略" width="67%">
    <el-card class="box-card">
      <div slot="header">
        <span class="bold">基本信息</span>
      </div>

      <el-row>
        <el-col :span="24">
          <div class="watch required">策略名称：
            <el-input
              v-model="name"
              style="width:200px"
              size="mini"
              placeholder="请输入策略名称"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="watch required">开始时间：
            <!-- :picker-options="pickerOptions1" -->
            <el-date-picker
              v-model="startDate"
              :editable="false"
              type="datetime"
              size="mini"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss   "
              placeholder="选择开始时间"
              class="timeLength"
              @change="checkStartTime"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="watch required">结束时间：
            <el-date-picker
              v-model="endDate"
              :editable="false"
              type="datetime"
              size="mini"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss   "
              placeholder="选择结束时间"
              class="timeLength"
              @change="checkTime"
            />
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="watch text">策略描述：
            <el-input
              v-model="description"
              type="textarea"
              style="width:500px"
              size="small"
              placeholder="请输入策略描述"
              maxlength="30"
            />
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card1">
      <div slot="header">
        <span class="bold">策略触发条件</span>
      </div>
      <el-row>
        <el-col :span="12">
          <div class="watch required">选择触发条件：
            <el-select v-model="selectConditions" placeholder="请选择" size="mini">
              <el-option value="" label="全部" />
              <el-option
                v-for="item in selectConditionAdd"
                :key="item.configKeyDown"
                :value="item.configKeyDown"
                :label="item.configValue"
                :disabled="item.status"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="watch required">是否对自动续订扣费生效：
            <el-select v-model="effect" placeholder="请选择" size="mini">
              <el-option value="0" label="是" />
              <el-option value="1" label="否" />
            </el-select>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card2">
      <div slot="header">
        <span class="bold">策略优惠形式</span>
      </div>
      <el-row>
        <el-col :span="24">
          <div class="watch required">选择优惠形式：
            <el-select v-model="shapeModel" placeholder="请选择" size="mini">
              <el-option
                v-for="item in shape"
                :key="item.configKeyDown"
                :value="item.configKeyDown"
                :label="item.configValue"
              />
                <!-- :disabled="item.status" -->
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="1">
          <!-- <div v-if="shapeModel == 2" class="watch required">折扣金额：
            <el-input
              v-model="discountAmount"
              size="small"
              placeholder="请输入金额"
              style="width:100px"
            />
            元
          </div> -->
          <div v-if="shapeModel == 0" class="watch required">折价金额
            <el-input
              v-model="discountAmount"
              size="small"
              placeholder="请输入金额"
              style="width:100px"
            />
            元
          </div>
          <div v-else-if="shapeModel == 1" class="watch required">折扣比例：
            <el-input
              v-model="discountRatio"
              size="small"
              placeholder="请输入比例"
              style="width:100px"
            />
            %
            <div style="font-size:14px;margin-top:5px;color: #909399">例如：产品打九折则配置90%</div>
          </div>
          <div v-else class="watch">
            <div class="required">
              积分兑换比例： 1  积分 =
              <el-input
                v-model="precent"
                size="small"
                placeholder="请输入金额"
                style="width:100px"
              />
              &nbsp;元
            </div>
            <div style="margin-top: 10px" class="required">
              单次订单积分兑换上限：
              <el-input
                v-model="maxNumber"
                size="small"
                placeholder="请输入上限"
                style="width:100px"
              />
              &nbsp;积分
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="btnall">
      <el-button
        type="primary"
        size="small"
        round
        style="width:100px"
        @click="save"
      >保存</el-button>
      <el-button
        type="primary"
        plain
        round
        size="small"
        style="width:100px"
        @click="check"
      >取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { checkName, saveShape } from '@/api/discounts.js'
import { plus } from '@/utils/validate.js'
export default {
  name: 'EditAdd',
  props: {
    // 遮罩
    editDialog: {
      type: Boolean,
      default: false
    },
    // 策略触发条件
    selectCondition: {
      type: Array,
      default: () => []
    },
    // 优惠形式
    discountsShape: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      addEditDialog: false,
      startDate: '', // 开始时间
      endDate: '', // 结束时间
      name: '', // 策略名称
      precent: '', // 折扣百分比
      discountRatio: '', // 折扣比例
      description: '', // 策略描述
      selectConditionAdd: [], // 选择触发条件
      selectConditions: '', // 策略
      shape: [], // 优惠形式
      discountAmount: '', // 折扣金额
      shapeModel: '1', // 优惠形式model
      effect: '0', // 是否生效
      maxNumber: '' // 积分上限
      /* pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      } */
    }
  },
  watch: {
    // 遮罩监听
    editDialog(newVal) {
      this.addEditDialog = newVal
      this.selectConditionAdd = this.selectCondition
      console.log(this.selectCondition)
      this.shape = this.discountsShape
    }
  },
  methods: {
    // 回调父组件
    check(val) {
      this.addEditDialog = false
      this.name = ''
      this.startDate = ''
      this.endDate = ''
      this.description = ''
      this.selectConditions = ''
      this.effect = '0'
      this.shapeModel = '1'
      this.discountAmount = ''
      this.discountRatio = ''
      this.precent = ''
      this.maxNumber = ''
      this.$emit('closeEdit', val)
    },

    // 校验开始时间
    checkStartTime(time) {
      const reg = new RegExp('-', 'g')
      // 比较是否大于现在的时间
      /* var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      } */
      /* const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else { */
      if (!!time) {  // eslint-disable-line
        var end
        if (this.endDate !== null) {
          end = new Date(this.endDate.replace(reg, '/')).getTime()
        } else {
          end = ''
        }
        var first = new Date(time.replace(reg, '/')).getTime()
        if (!!end && first > end) {
          this.$message({
            message: '开始时间不能大于结束时间',
            type: 'error'
          })
          this.startDate = ''
        }
      }
      // }
    },

    // 校验结束时间
    checkTime(time) {
      const reg = new RegExp('-', 'g')
      // console.log(newStr)
      /* var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(reg, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      } */
      /* const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else { */
      if (!!time) {  // eslint-disable-line
        var start
        if (this.startDate !== null) {
          start = new Date(this.startDate.replace(reg, '/')).getTime()
        } else {
          start = ''
        }
        var end = new Date(time.replace(reg, '/')).getTime()
        if (end < start) {
          this.$message({
            message: '开始时间不能大于结束时间',
            type: 'error'
          })
          this.endDate = ''
        }
      }
      // }
    },

    // 保存
    save() {
      const name = this.name // 策略名称
      const startDate = this.startDate // 开始时间
      const endDate = this.endDate // 结束时间
      const description = this.description // 描述
      const selectConditions = this.selectConditions // 触发条件
      const effect = this.effect // 是否自动续订
      const shapeModel = this.shapeModel // 优惠形式
      const discountAmount = this.discountAmount // 折扣金额
      const discountRatio = this.discountRatio // 折扣比例
      const conversionRatio = (1 / this.precent).toFixed(2) // 积分比例
      const maxNumber = this.maxNumber // 积分上限
      if (name) {
        checkName({ name: name }).then(res => {
          if (res.resultCode === '0000') {
            if (startDate) {
              if (endDate) {
                if (shapeModel === '0') { // 折价购买
                  if (discountAmount) {
                    if (plus(discountAmount)) {
                      const data = {
                        name: name, // 名称
                        beginTime: startDate, // 日期
                        endTime: endDate, // 日期
                        description: description, // 描述
                        triggeringConditions: selectConditions,
                        isGoon: effect, // 是否自动续订
                        preferentialType: shapeModel, // 优惠形式
                        discountAmount: discountAmount // 折扣价格
                      }
                      saveShape(data).then(res => {
                        if (res.resultCode === '0000') {
                          this.$message({
                            message: '保存成功！',
                            type: 'success'
                          })
                          this.check(true)
                        }
                      })
                    } else {
                      this.$message({
                        type: 'error',
                        message: '折扣金额必须为正数'
                      })
                    }
                  } else {
                    this.$message({
                      type: 'error',
                      message: '折扣金额不能为空'
                    })
                  }
                } else if (shapeModel === '1') { // 折扣购买
                  if (discountRatio) {
                    if (plus(discountRatio)) {
                      const data = {
                        name: name, // 名称
                        beginTime: startDate, // 日期
                        endTime: endDate, // 日期
                        description: description, // 描述
                        triggeringConditions: selectConditions,
                        isGoon: effect, // 是否自动续订
                        preferentialType: shapeModel, // 优惠形式
                        discountRatio: discountRatio // 折扣比例
                      }
                      saveShape(data).then(res => {
                        if (res.resultCode === '0000') {
                          this.$message({
                            message: '保存成功！',
                            type: 'success'
                          })
                          this.check(true)
                        }
                      })
                    } else {
                      this.$message({
                        message: '折扣比例必须为正数！',
                        type: 'error'
                      })
                    }
                  } else {
                    this.$message({
                      message: '请输入折扣比例！',
                      type: 'error'
                    })
                  }
                } else if (shapeModel === '2') {
                  const data = {
                    name: name, // 名称
                    beginTime: startDate, // 日期
                    endTime: endDate, // 日期
                    description: description, // 描述
                    triggeringConditions: selectConditions,
                    isGoon: effect, // 是否自动续订
                    preferentialType: shapeModel, // 优惠形式
                    discountRatio: discountRatio // 折扣比例
                  }
                  saveShape(data).then(res => {
                    if (res.resultCode === '0000') {
                      this.$message({
                        message: '保存成功！',
                        type: 'success'
                      })
                      this.check(true)
                    }
                  })
                } else if (shapeModel === '3') {
                  const data = {
                    name: name, // 名称
                    beginTime: startDate, // 日期
                    endTime: endDate, // 日期
                    description: description, // 描述
                    triggeringConditions: selectConditions,
                    isGoon: effect, // 是否自动续订
                    preferentialType: shapeModel, // 优惠形式
                    conversionRatio: conversionRatio, // 折扣比例
                    maxNumber: maxNumber // 积分上限
                  }
                  saveShape(data).then(res => {
                    if (res.resultCode === '0000') {
                      this.$message({
                        message: '保存成功！',
                        type: 'success'
                      })
                      this.check(true)
                    }
                  })
                }
              } else {
                this.$message({
                  type: 'error',
                  message: '结束时间不能为空'
                })
              }
            } else {
              this.$message({
                type: 'error',
                message: '开始时间不能为空'
              })
            }
          }
        })
      } else {
        this.$message({
          type: 'error',
          message: '请填写策略名称'
        })
      }
    }
  }
}
</script>

<style scoped>
.watch{
  margin: 10px 0;
}
.text{
  line-height: 50px;
}
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 6px;
}
.box-card2{
  margin-top: 6px;
}
.btnall{
  margin: 17px auto -12px auto;
  width: 230px;
}
.bold{
  font-weight: bold;
}
.required::before{
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>
